<template>
  <div class="hello">
    账号：<input type="text" v-model="username" /><br>
    密码：<input type="password" v-model="password" /><br>
    <button type="button" @click="clickLogin()">login</button>
  </div>  
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    clickLogin: function() {
      var self = this;
      var postData = { username: this.username, password: this.password }
      self.$axios.post('http://localhost:9999/login', postData).then(function(response) {
        if (response.data.code === 0) {
          localStorage.setItem("token", response.data.data)
          self.$router.push({ name: 'UserInfo'})
        } else {
          alert(response.data.message);
        }
      }).catch(function(error) {
        alert(error)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
